<template>
  <div id="accurate">
    <v-header title="精确查询" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div style="padding: 10px; height: calc(100% - 56px); overflow: auto">
      <div style="background-color: #fff; min-height: 100%; padding: 15px">
        <div class="mainForm">
          <el-form  :model="clientData" class="demo-form-inline" size="mini" label-position="right" label-width="90px">
            <div>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="客户名">
                    <el-input v-model="clientData.CNS_NAME" placeholder="客户名"></el-input>
                  </el-form-item>
                  <el-form-item label="客户经理号">
                    <el-input v-model="clientData.CUST_MGR_NO" placeholder="客户经理号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件种类">
                    <el-select v-model="clientData.ID_TYPE" placeholder="证件种类">
                      <el-option label="请选择" value="0"></el-option>
                      <el-option label="身份证" value="1"></el-option>
                      <el-option label="居住证" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="证件号码">
                    <el-input v-model="clientData.ID_NO" placeholder="证件号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号">
                    <el-input v-model="clientData.PHONE_NUM" placeholder="手机号"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item style="text-align: right">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div>
          <user-list-table :userList="userListData" :queryItemDetailURL="queryItemDetailURL" @tagsMap="handleTagsMap" @similarPeople="jumpRout" @userPic="handleUserPic"></user-list-table>
        </div>
        <div style="margin-top: 20px" v-if="userListData.length > 0">
          <el-pagination
            :current-page="nowpage"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {VButton, VHeader} from '../../../components'
  import {nextPage} from '../../../assets/js/index'
  import userListTable from './components/userListTable.vue'
  import ajax from '../../../api/ajax/ajax.js'
  import api from '../../../api/url.js'
  import { mapMutations, mapGetters } from 'vuex'
  import Msg from '../../../assets/js/msg'
  export default {
    components: {
      VHeader,
      VButton,
      userListTable
    },
    data () {
      return {
        clientData: {
          ID_NO: '',
          PHONE_NUM: '',
          ID_TYPE: '',
          CUST_MGR_NO: '',
          CNS_NAME: ''
        },
        userListData: [],
        page: '',
        nowpage: 1,
        total: '',
        loading: null,
        queryItemDetailURL: api.USER_DETAIL_QUERY
      }
    },
    computed: {
      ...mapGetters([
        'selectTagPageNo'
      ])
    },
    methods: {
      ...mapMutations([
        'updateselectTagPageNo'
      ]),
      toggleRelationship () {
        this.relation = (this.relation === '1' ? '2' : '1')
      },

      jumpRout (data) {
        nextPage('groupQuery', data)
      },

      reset () {
        this.clientData = {
          ID_NO: '',
          PHONE_NUM: '',
          ID_TYPE: '',
          CUST_MGR_NO: '',
          CNS_NAME: ''
        }
      },

      updateMatSelectData () {
        let selectTagPageNo = {
          clientData: this.clientData,
          nowpage: this.nowpage
        }
        this.updateselectTagPageNo(selectTagPageNo)
      },

      onSubmit () {
        this.nowpage = 1
        let params = {
          cns_name: this.clientData.CNS_NAME,
          id_type: this.clientData.ID_TYPE,
          id_no: this.clientData.ID_NO,
          phone_num: this.clientData.PHONE_NUM,
          cust_mgr_no: this.clientData.CUST_MGR_NO,
          pageNo: this.nowpage,
          pageSize: 10
        }
        this.loading = this.$loading({fullscreen: false, target: '#accurate'})
        ajax.post(api.ACCURATE_QUERY, params)
          .then(res => {
            this.loading.close()
            if (res.data.list.length === 0) {
              Msg.alert('查询成功,但是没有数据')
              return null
            }
            this.userListData = res.data.list
            this.total = res.data.total
            this.updateMatSelectData()
          })
      },
      // pervChange () {
      //   this.nowpage--
      //   let params = {
      //     cns_name: this.clientData.CNS_NAME,
      //     id_type: this.clientData.ID_TYPE,
      //     id_no: this.clientData.ID_NO,
      //     phone_num: this.clientData.PHONE_NUM,
      //     cust_mgr_no: this.clientData.CUST_MGR_NO,
      //     pageNo: this.nowpage,
      //     pageSize: 10
      //   }
      //   ajax.post(api.ACCURATE_QUERY, params)
      //     .then(res => {
      //       this.loading.close()
      //       this.userListData = res.data.list
      //       this.updateMatSelectData()
      //     })
      //   this.loading = this.$loading({fullscreen: false, target: '#accurate'})
      // },
      // nextChage () {
      //   this.nowpage++
      //   let params = {
      //     cns_name: this.clientData.CNS_NAME,
      //     id_type: this.clientData.ID_TYPE,
      //     id_no: this.clientData.ID_NO,
      //     phone_num: this.clientData.PHONE_NUM,
      //     cust_mgr_no: this.clientData.CUST_MGR_NO,
      //     pageNo: this.nowpage,
      //     pageSize: 10
      //   }
      //   ajax.post(api.ACCURATE_QUERY, params)
      //     .then(res => {
      //       this.loading.close()
      //       this.userListData = res.data.list
      //       this.updateMatSelectData()
      //     })
      //   this.loading = this.$loading({fullscreen: false, target: '#accurate'})
      // },
      handleCurrentChange (v) {
        let params = {
          cns_name: this.clientData.CNS_NAME,
          id_type: this.clientData.ID_TYPE,
          id_no: this.clientData.ID_NO,
          phone_num: this.clientData.PHONE_NUM,
          cust_mgr_no: this.clientData.CUST_MGR_NO,
          pageNo: v,
          pageSize: 10
        }
        ajax.post(api.ACCURATE_QUERY, params)
          .then(res => {
            this.loading.close()
            this.nowpage = v
            this.userListData = res.data.list
            this.updateMatSelectData()
          })
        this.loading = this.$loading({fullscreen: false, target: '#accurate'})
      },
      // 根据是否又用户画像返回 返显数据查询
      isReturnQuery () {
        if (this.$route.query.isReturn) {
          this.clientData = this.selectTagPageNo.clientData
          this.nowpage = this.selectTagPageNo.nowpage
          this.onSubmit()
        }
      },
      handleUserPic (obj) {
        window.sessionStorage.setItem('returnPageInUserPortarit', 'accurateQuery')
        nextPage('userPortarit', {'cust_no': obj['cust_no']})
      },
      handleTagsMap (obj) {
        // nextPage('tagMap', {'cust_no': obj['cust_no'], 'cns_name': obj['cns_name']})
        nextPage('tagMap')
      }
    },
    mounted () {
      this.isReturnQuery()
    }
  }
</script>
<style lang="stylus" scoped>
#accurate
  height 100%
  overflow auto
  .demo-form-inline
    .el-input, .el-select, .el-input__inner
      display block
      width 100%
  .mainForm
    background-color #fff
    margin-bottom 15px
  .inline-block
    display inline-block
    vertical-align middle
</style>
